<template>
    <div>

      <el-container>
        <el-header height="80px">
          <div class="abc"> 陪玩后台管理平台</div>
          <div @click="logout" class="bcd">退出</div>

        </el-header>
        <div class="aside">
        <el-container>
          <el-aside width="150px">
            <el-menu :default-active="$route.path"
                     router mode="horizontal"
                     class="el-menu-demo"

                     active-text-color="orange"
                     style="background: gray">
              <el-menu-item index="/play" > <img src="http://qom05wwz5.hd-bkt.clouddn.com/QQ%E6%88%AA%E5%9B%BE20210223173643.jpg"/></el-menu-item>
              <el-menu-item index="/play" >陪玩信息管理</el-menu-item>
              <el-menu-item index="/user" >用户信息管理</el-menu-item>
              <el-menu-item index="/game" >游戏分类管理</el-menu-item>
              <el-menu-item index="/about" >关于我们</el-menu-item>
            </el-menu>

          </el-aside>
          <el-container>
            <el-main><router-view/></el-main>
            <el-footer></el-footer>
          </el-container>
        </el-container>
        </div>
      </el-container>
    </div>
</template>

<script>
  import axious from 'axios'
    export default {
        name: "index",
      data() {
        return {
          src: 'https://pic.fxxz.com/up/2018-10/2018102416114118.jpg'
        }
      },
        methods:{
            logout(){
              axious.get("api/user/logout").then(res=>{
                if(res.data.code==200){
                  this.$router.push("/")
                }
              }).catch(res=>{
                alert("网络连接失败");

            })
          }
        }
      ,mounted(){
       this.$router.push("/play")
      }
    }
</script>

<style scoped>
  .el-menu--horizontal>.el-menu-item {
    float: left;
    height: 60px;
    line-height: 60px;
    margin: 0;
    border-bottom: 2px solid transparent;
    color: #17326a;
  }
  .abc{
    color:orange;
    font-size: 60px;
    font-weight: bold;
    font-family:华文琥珀
  }
.aside{

  color: orange;
  align-items: center;
  text-align: left;
  line-height: 60px;
  font-family: 微软雅黑;
  font-size: 50px;

  font-weight: bold;
}
  .bcd{
    margin-top: 0px;
    font-size: 20px;
    color: orange;
    font-weight: bold;
    float: right;
  }
</style>
